@charset "utf-8";

$fontcolor:#36a9f6;

$font-size:100px;
@function r($px){
    @return $px/$font-size * 1rem;
}




#web{
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: #ffffff;
    overflow: hidden;
}

//海报模板
.carousel-wrap{
    position: relative;
    width: 100%;
    padding: r(60px) 0;
    .list-wrap{
        position: relative;
        width: r(350px);
        height: r(622px);
        margin: 0 auto;
        overflow: hidden;
        -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
        -webkit-border-radius: r(8px); 
        -moz-border-radius: r(8px); 
        border-radius: r(8px);
        ul{
            width: r(2000px);
            height: 100%;
        }
        li{
            float: left;
            width: r(350px);
            height: 100%;
            overflow: hidden;
            text-align: center;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .btn{
        position: absolute;
        top: 50%;
        width: r(32px);
        height: r(60px);
        transform: translateY(-50%);
        cursor: pointer;
    }
    .left{
        left: r(58px);
        background: url(../img/left.png) no-repeat center;
        background-size:100% 100% ;
    }
    .right{
        right: r(58px);
        background: url(../img/right.png) no-repeat center;
        background-size:100% 100% ;
    }
    .swiper-pagination{
        display: none;
    }
    &.active{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 !important;
        z-index:9;
        background-color: #fff;
        .list-wrap{
            width: 100%;
            height: 100%;
            -webkit-border-radius: 0; 
            -moz-border-radius: 0; 
            border-radius: 0;
            z-index: 19;
            ul{
                position: static;
                width: 100%;
            }
            li{
                width:100%;
                img{
                    width: auto;
                    height: 100%;
                }
            }
        }
    }
}


//底部分享、保存按钮
.footer{
    width: 100%;
    padding: 0 r(20px);
    .footer-top{
        width: 100%;
        &>div{
//          width: r(290px);
            width: 100%;
            height: r(80px);
            line-height: r(80px);
            color: $fontcolor;
            border: 1px solid $fontcolor;
            -webkit-border-radius: r(8px); 
            -moz-border-radius: r(8px); 
            border-radius: r(8px);
            font-size: r(36px);
            text-align: center; 
            cursor: pointer;
        }
    }
}
//alert提示框
.alert-view{
    width: 100%;
    height: r(80px);
    line-height: r(80px);
    font-size: r(30px);
    color: #fff;
    background-color: rgba(54,169,246,0.8);
    text-align: center;
    letter-spacing: 1px;
}
//分享指示框
.share-wrap{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    .share-view{
        position: absolute;
        top: r(20px);
        right: r(40px);
        width: r(540px);
        height: r(367px);
        background: url(../img/sharealert-en.png) no-repeat center;
        background-size: 100%;
    }
}



.win-imgwrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
    transform: scale(0,0);
    transition: all .5s;
    text-align: center;
    img{
        width: auto;
        height: 100%;
    }
}





.active{
    .alert-view{
        font-size: r(26px);
    }
    .share-wrap .share-view{
        background-image: url(../img/sharealert-eng.png);
    }
}
